<template>
    <div class="all">
        <div class="search">
            <Search />
        </div>
        <div class="container">

            <van-tree-select v-model:main-active-index="activeIndex" height="100%" :items="items">
                <template #content>
                    <TabList :title="title" :list="(goods as CatsTree.myGoods)" />
                </template>
            </van-tree-select>

        </div>


    </div>
</template>

<script lang="ts" setup>
import Search from '@/components/search.vue'
import TabList from '@/components/tab.vue'
import { getSearchNewGoodsList, getSearchSellGoodsList, getSearchSynGoodsList, type CatsTree } from '@/api'
import { ref, watchEffect } from 'vue'

// 搜索页下商品标题
const title = ref<string[]>(['综合', '销量', '新品'])
// 数据传给组件的
const goods = ref<CatsTree.myGoods>([])

// 接口参数
const parmas = {
    _page: 1,
    _limit: 10
}
// 并发队列 
const newGoodsList = [getSearchNewGoodsList(parmas), getSearchSellGoodsList(parmas), getSearchSynGoodsList(parmas)]
watchEffect( async () => {
    const result = await Promise.all(newGoodsList)
    goods.value = result // 赋值
    
})


const activeIndex = ref(0);
const items = [
    {
        text: '浙江',
        children: [
            { text: '杭州', id: 1 },
            { text: '温州', id: 2 },
            { text: '宁波', id: 3, disabled: true },
        ],
    },
    {
        text: '江苏',
        children: [
            { text: '南京', id: 4 },
            { text: '无锡', id: 5 },
            { text: '徐州', id: 6 },
        ],
    },
    { text: '福建', disabled: true },
];

</script>

<style lang="scss" scoped>
.all{
    height: 100%;
    overflow: hidden;
}
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.search {
    display: flex;
    // height: 100%;
    height: 54px;
    padding-top: -54px;
    box-sizing: border-box;
}
</style>